<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
</head>
<body>
<!--❌-->
{{a}}
<!--必须写到app里边-->
<div id="app">
    <!--差值表达式-->
    <label>{{b}}</label><br/>
    <!--数据绑定 innerHTML innerText-->
    <label v-html="b"></label><br/>
    <label v-text="b"></label><br/>
    <label>{{d}}</label><br/>
    <label v-html="d"></label><br/>
    <label v-text="d"></label><br/>
    <!--双向数据绑定-->
    <input v-model="b"/><br/>
    <!--❌-->
    <input v-text="b"/>
</div>
</body>
</html>
<script src="../js/vue.min.js"></script>
<script>
    new Vue({
        el: '#app',
        /* 第一种方式：
        data: {
            a: 1,
            b: 'admin',
            c: true,
            d: '<b>你好</b>'
        }*/
        /* 第二种方式：
        data() {
            return {
                a: 1,
                b: 'admin',
                c: true,
                d: '<b>你好</b>'
            }
        }*/
        // 第三种方式：
        data:function() {
            return{
                a: 1,
                b: 'admin',
                c: true,
                d: '<b>你好</b>'
            }
        }
    })
</script>